<template>
	<view>
		<custom-navigation-bar title="订单核销"></custom-navigation-bar>
		<view style="width: 100%;float: left;margin-top: 150rpx;"></view>
		<view class="list-item">
			<view class="list-shop-img">
				<image src="../../static/hd1.png" class="list-shop-img1"></image>
			</view>
			<view class="list-item-content">
				<view class="list-item-content-title">
					{{order.name}}  
					<label class="status_def" v-if="order.status==0">待付款</label>
					<label class="status_def" v-if="order.status==1">待使用</label>
					<label class="status_def" v-if="order.status==2">已完成</label>
					<label class="status_def" v-if="order.status==3">退款中</label>
					<label class="status_def" v-if="order.status==4">退款成功</label>
					<label class="status_def" v-if="order.status==5">已评论</label> 
				</view>  
				<view class="list-item-content-v">
					订单金额：{{order.money}}&nbsp;&nbsp;数量：{{order.nums}}
				</view> 
				<view class="list-item-content-v" v-if="order.status==0">
					下单时间：{{order.create_time}}
				</view>
				<view v-if="order.status==1||order.status==2||order.status==5">
					<view  class="list-item-content-v" v-if="order.pay_time!=null">
						付款时间：{{order.pay_time}}
					</view>
					<view class="list-item-content-v" v-if="order.use_time!=null">
						使用时间：{{order.use_time}}
					</view>
				</view>
				<view  class="list-item-content-v" v-if="order.status==3">
					申请退款时间：{{order.refund_time}}
				</view>
				<view  class="list-item-content-v" v-if="order.status==4">
					退款时间：{{order.refund_time}}
				</view> 
			</view> 
			<view class="list-item-btn-box" v-if="order.status!=3&&order.status!=4&&order.status!=5">
				<view class="list-item-btn" v-if="order.status==1" @click="use()">
					商品核销
				</view>
			</view>
		</view>
		
		<view class="detail-info1" style="font-size: 25rpx;">
			<view class="detail-info1-xq">
				 团购详情
			</view>
			<view v-for="(item,index) in order.deail_info" :key="index">
				<view class="detail-info1-xq-title">&nbsp;&nbsp;{{item.title}}</view>
				<view class="detail-info1-xq-item" v-for="(item1,index1) in item.detail" :key="index1">
					<view class="xq-lable">{{item1.title}}</view>
					<view class="xq-content">{{item1.content}}</view>
				</view>
			</view>
			<view class="detail-info1-xq">
				 图文详情
			</view>
			<view style="width: 100%;height: 10rpx;float: left;"></view>
			<image v-for="(item,index) in order.detail_img" :key="index" :src="item" style="width: 100%;height: 500rpx;float: left;"></image> 
			<view class="detail-info1-xq">
				 购买须知
			</view>
			<view v-for="(item,index) in order.buy_notice" :key="index">
				<view class="detail-info1-xq-title">&nbsp;&nbsp;{{item.title}}</view>
				<view class="detail-info1-xq-item" v-for="(item1,index1) in item.detail" :key="index1"> 
					<view  style="width: 100%;">{{item1.content}}</view>
				</view>
			</view> 
			<view style="width: 100%;height: 20rpx;float: left;"></view>
		</view> 
		<view style="width: 100%;height: 70rpx;float: left;"></view>
		
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue';
	import { ref } from "vue"; 
	import http from '../../../utils/http'; 
	const order=ref({
		name:""
	});
	const id=ref();
	const openId=ref(); 
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	onLoad((query) => {
		id.value=query.orderId; 
		openId.value=query.openId;
		getOrder();
	})
	
	function use(){
		uni.showLoading({
		 	title: '核销中',
		 	mask:true
		}); 
		http.request({
			url: "/shop/goods/use",
			method: "POST",
			data: {
				id:id.value,
				userId:getApp().globalData.shopUserId
			}
		}).then((responseData) => {
			uni.hideLoading(); 
			getOrder();
			if(responseData.code==1){
				uni.showToast({
					icon: 'success',
					title: '核销成功'
				});
			}else{
				uni.showToast({
					icon: 'error',
					title: responseData.message
				});
			}
		}).catch((err) => {
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			});
			uni.hideLoading();
		})
	}
	 
	function getOrder(){
		uni.showLoading({
		 	title: '数据加载中',
		 	mask:true
		}); 
		http.request({
			url: "/goods/order/detail",
			method: "POST",
			data: {
				id:id.value,
				openId:openId.value
			}
		}).then((responseData) => {
			uni.hideLoading(); 
			if(responseData.code==1){
				responseData.data.data.deail_info=JSON.parse(responseData.data.data.deail_info);
				responseData.data.data.detail_img=JSON.parse(responseData.data.data.detail_img);
				responseData.data.data.main_image=JSON.parse(responseData.data.data.main_image);
				responseData.data.data.buy_notice=JSON.parse(responseData.data.data.buy_notice);  
				order.value=responseData.data.data;
				console.log("aaa",order.value); 
			}  
		}).catch((err) => {
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			});
			uni.hideLoading();
		})
	}
  
	 
</script>

<style>
	@import "../../list/list.scss"; 
	@import "../../activity/detail.scss"; 
	.erweima_box{
		width: 100%;height: 300rpx;float: left;text-align: center;margin-top: 20rpx;margin-bottom: 20rpx;
	}
.goods_pl_41{
		width: 120rpx;height: 120rpx;float: left;margin-left: 10rpx;
	}
	.goods_pl_4{
		width: 94%;margin-left: 3%;float: left;height: auto;margin-bottom: 20rpx;margin-top: 10rpx;
	}
	.goods_pl_3{
		width: 94%;margin-left: 3%;float: left;height: auto;
	}
	.goods_pl_21{
		float: right;color: #cccccc;font-size: 22rpx;
	}
	.goods_pl_2{
		width: 94%;margin-left: 3%;float: left;height: 50rpx;line-height: 50rpx
	}
	.goods_pl_1{
		width: 94%;float: left;height:auto;margin-left: 3%;border-radius: 24rpx;background-color: white;margin-top: 20rpx;padding-top: 20rpx;
	}
	.goods_005{
		width: 84%;height: 220rpx;float: left;margin-left: 8%;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 25rpx;
	}
	.goods_004{
		width: 84%;height: 30rpx;float: left;margin-left: 8%;line-height: 25rpx;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 25rpx;
	}
	.goods_00_p3{
		width: auto;border: red 3rpx solid;margin-left: 20rpx;padding-left: 10rpx;padding-right: 10rpx;padding-top: 2rpx;padding-bottom: 2rpx; border-radius: 15rpx;color: red;
	}
	.goods_00_p1{
		color: #cccccc;text-decoration: line-through
	}
	.goods_00_p{
		color: red;font-size: 34rpx;margin-right: 20rpx;
	}
	.goods_00_4{
		width: 94%;height: auto;float: left;margin-left: 3%;line-height: 25rpx;font-size: 22rpx;line-height: 50rpx;color: #cccccc;
	}
	.goods_00_3{
		width: 94%;height: 30rpx;float: left;margin-left: 3%;line-height: 25rpx;color: #cccccc;font-size: 22rpx;margin-top: 10rpx;
	}
	.goods_00_2{
		width: 94%;height: 30rpx;float: left;margin-left: 3%;line-height: 25rpx;color: #cccccc;font-size: 22rpx;
	}
	.goods_00_1{
		width: 94%;height: 60rpx;float: left;margin-left: 3%;line-height: 60rpx;
	}
	.menu_box{
		height:70rpx;background: white;width: 94%;margin-left: 3%;border-radius: 20rpx;float: left;margin-top: 20rpx;line-height: 70rpx;
	}
	.menu_se{
		width: auto;margin-left:3%;color: #2AE8DC;font-weight: bold;float: left;font-size: 28rpx;
	}
	.menu_def{
		width: auto;margin-left:3%;color: #CCCCCC;font-weight: bold;float: left;font-size: 28rpx;
	}
	.goods_001{
		width: 90%;height: 30rpx;float: left;margin-left: 5%;line-height: 30rpx;color:#545454;font-size: 22rpx;margin-top: 20rpx;font-size: 25rpx;text-align: center;
	}
	.goods_002{
		width: 84%;height: 30rpx;float: left;margin-left: 8%;line-height: 30rpx;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 25rpx;
	}
	.goods_003{
		width: 84%;height: 30rpx;float: left;margin-left: 8%;line-height: 25rpx;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 25rpx;
	}
	.goods_002_1{
		float: left;margin-top: -2rpx;
	}
	.goods_003_1{
		float: left;margin-top: -2rpx;
	}
</style>